<template>
  <n-modal
    v-model:show="getProps.modalData.show"
    :bordered="false"
    :style="{ width: '600px' }"
    class="custom-card"
    preset="card"
    :mask-closable="false"
  >
    <div>
      <div style="margin-bottom: 20px">已选择{{ getProps.modalData.checkedIds.length || 0 }}个媒体账户</div>
      <x-form ref="formRef2" v-model:model="form" :rules="rules" inline label-placement="left">
        <n-form-item label="所属人员" path="accountId">
          <n-select
            v-model:value="form.accountId"
            :options="getProps.accountList"
            value-field="accountId"
            label-field="accountName"
            filterable
            clearable
          />
        </n-form-item>
      </x-form>
      <n-text type="error">变更人员后，其广告、创意、数据等相关数据均同步变更</n-text>
    </div>
    <template #footer>
      <n-space justify="end">
        <x-button @click="handleCancel">取消</x-button>
        <x-button type="primary" @click="handleSubmit()">确认</x-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
  import { XButton, XForm } from '@/components'
  import { NFormItem, NModal, NSelect, NSpace, NText, useMessage } from 'naive-ui'
  import { reactive, ref } from 'vue'
  import { useStore } from '@/store'
  const store = useStore()
  const emits = defineEmits(['success'])
  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    },
    accountList: {
      type: Array,
      default: () => []
    }
  })
  const message = useMessage()
  const getProps = reactive(props)
  const form = ref({
    accountId: null
  })
  const rules = reactive({
    accountId: { required: true, type: 'number', message: '请选择所属人员', trigger: 'blur' }
  })
  function handleSubmit() {
    store
      .dispatch('system/mediaAccountBatchChange', {
        accountId: form.value.accountId,
        accountCodeList: getProps.modalData.checkedIds
      })
      .then(() => {
        getProps.modalData.show = false
        emits('success')
      })
      .catch(() => {})
  }
  function handleCancel() {
    getProps.modalData.show = false
  }
</script>

<style scoped lang="scss"></style>
